<template>
  <div class="container">
    <el-descriptions title="" direction="vertical" :column="4" border>
      <el-descriptions-item label="项目名称">{{ detailData.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目类别">{{ detailData.projectCategory }}</el-descriptions-item>
      <el-descriptions-item label="项目开始时间" :span="2">{{ detailData.projectStartTime }}</el-descriptions-item>
      <el-descriptions-item label="预计完成时间" :span="2">{{ detailData.projectEndTime }}</el-descriptions-item>
      <el-descriptions-item label="申报单位" :span="2">{{ detailData.applyUnit }}</el-descriptions-item>
      <el-descriptions-item label="总投资(万元)" :span="2">{{ detailData.totalBudget }}</el-descriptions-item>
      <el-descriptions-item label="申报日期" :span="2">{{ detailData.applyDate }}</el-descriptions-item>
      <el-descriptions-item label="概述（项目背景、编制依据、项目范围、建设目标、主要建设内容" :span="4">{{ detailData.summarize }}</el-descriptions-item>
      <el-descriptions-item label="现状及需求分析" :span="4">{{ detailData.demandAnalysis }}</el-descriptions-item>
      <el-descriptions-item label="项目必要性和可行性分析" :span="4">{{ detailData.feasibilityNalysis }}</el-descriptions-item>
      <el-descriptions-item label="项目内容和实施方案" :span="4">{{ detailData.implementationPlan }}</el-descriptions-item>
      <el-descriptions-item label="项目计划进度" :span="4">{{ detailData.projectSchedule }}</el-descriptions-item>
      <el-descriptions-item label="项目费用估算" :span="4">{{ detailData.projectCostEstimation }}</el-descriptions-item>
      <el-descriptions-item label="项目效益分析（经济效益、社会效益、管理效益" :span="4">{{ detailData.projectBenefitAnalysis }}</el-descriptions-item>
      <el-descriptions-item label="风险及对策" :span="4">{{ detailData.riskCountermeasure }}</el-descriptions-item>
      <el-descriptions-item label="文件" :span="4">
        <el-upload
          ref="uploadRef"
          :limit="5"
          :headers="headers"
          action="/fastDfs/file/upload"
          :on-success="handleStandard"
          :on-preview="previewFile"
          :on-remove="removeRdForm"
          :on-exceed="handleExceed"
          :on-error="handleError"
          :file-list="detailData.approvalFilePath || []"
          drag
          :disabled="1"

      ><!--          :disabled="disabledFlag"--><!--          drag-->
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <div class="el-upload__tip"></div>
      </el-upload>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { ref, reactive, onMounted ,watch} from 'vue'
import tableData from '../tableHeader.json'
import { getSetUpExpertReview } from '@/views/science/api/digit'
import Table from '@/views/science/components/table/table.vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import { lookResult, } from '@/views/science/api/digit'
import {ElMessage} from "element-plus";

export default {
  components: {
    Table,
    SelectOption,
  },
  props:{
    lookId:{
      type:String,
    },
    detailData:{
      type:Object,
    }
  },
  setup(props,{emit}) {
    const activeName = ref('first')
    const data = reactive({

    })

    //列表
    const tableList = async () => {

    }
    onMounted(() => {
      tableList();
      console.log('onMounted');
    });

    watch(props.lookId, (newValue, oldValue) => {
      console.log('look watch');
    });
    const cookie = () => localStorage.getItem('token')
    //-----------文件上传---------
    const handleDocument = (uploadFile, key) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        // store.state.lxsq.lxsqInfo[key] = uploadFile.data.path
        props.detailData.approvalFileName = uploadFile.data.fileName
        props.detailData.approvalFilePath = uploadFile.data.path
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    const handleApplication = (uploadFile) => {
      handleDocument(uploadFile, 'projectApplication')
    }

    const previewFile = (file) => {
      window.open(file.url)
    }

    const removeRdForm = (file, uploadFiles) => {
      handleRemove(file, uploadFiles, 'approvalFilePath')
    }
    const handleRemove = (file, uploadFiles, key) => {
      props.detailData.approvalFilePath = props.detailData.approvalFilePath.filter(o => o.url !== file.url);
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传5个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    const handleStandard = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log('上传成功uploadFile', uploadFile)
        let obj = {
          name: uploadFile.data.fileName,
          url: uploadFile.data.path,
        }
        props.detailData.approvalFilePath = (props.detailData.approvalFilePath || []).concat(obj)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    return{
      activeName,
      data,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
      handleApplication,
      previewFile,
      handleExceed,
      handleError,
      removeRdForm,
      handleStandard,
    }
  },
}
</script>

<style lang="scss">
.table_{
  .el-pagination {
      display: none;
    }
}
</style>
<style lang="scss" scoped>
.example-pagination-block {
  margin-top: 15px;
  text-align: center;
}

:deep(.el-pagination .btn-next .el-icon) {
  margin: 0 auto;
}

:deep(.el-pagination .btn-prev .el-icon) {
  margin: 0 auto;
}
.container {
  background-color: white;
  padding: 20px;
}
</style>
